<template>
  <div class="app-container">
    <!-- 查询 -->
    <tl-list-search class="tl-search-div" style="display:block" ref="search" :isDisplaySearch="false" :query-param="queryParam" @search="doQuery" :isDisplayDefaultSearch="false" v-if="isHeaderDisplay">
      <template slot="search">
        <div class="">
          <el-row>
            <el-col :span="7">
              <el-form-item label="关键信息" prop="name" label-width="80px">
                <el-input v-model="queryParam.qry_name" style="width:220px" placeholder="输入主题/标签"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="7">
              <el-form-item label="会议类型" label-width="80px">
                <el-cascader v-model="meetType" :options="meetTypeList" filterable style="width:220px" @change="handleMeetTypeChange" clearable></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="会议时间" label-width="80px"> <el-date-picker v-model="meettimerange" ref="datePicker" type="daterange" value-format="yyyy-MM-dd" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" @change="meetTimeChange"> </el-date-picker> </el-form-item>
            </el-col>
          </el-row>
          <el-col :span="7">
            <el-form-item label="发起人" prop="launchuser" label-width="80px">
              <el-input v-model="queryParam.qry_launchuser" style="width:220px" placeholder="输入工号/姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="组织团队" label-width="80px">
              <tl-ref-list v-model="queryParam.qry_teamid" :initDisplayData.sync="queryParam.teamname" style="width:220px" refTitle="团队" :queryDataUrl="url.queryTeamList" :singleSelect="true"></tl-ref-list>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="组织部门" label-width="80px">
              <tl-ref-dept v-model="queryParam.qry_deptcode" :initDisplayData.sync="queryParam.deptname" style="width:220px" nameType="fullname" dataType="code" :singleSelect="true"></tl-ref-dept>
            </el-form-item>
          </el-col>
        </div>
      </template>
      <template slot="button">
        <el-button style="float:right" class="filter-item" type="primary" icon="el-icon-search" @click="doQuery">搜索</el-button>
      </template>
    </tl-list-search>
    <!-- 工具栏 -->
    <tl-list-toolbar ref="toolbar" :isDisplayAdd="false" :isDisplayDeleteBatch="false" @add="openAddDialog('editForm')" @exportExcel="doExportExcel" @deleteBatch="doDeleteBatch" @refresh="doRefresh" @columnCustomize="doColumnCustomize" @displaySearch="doDisplaySearch" :disableDeleteBatch="selectedRowKeys.length <= 0" :isDisplayExport="false">
      <template slot="left-btn">
        <!-- native capture 捕获键盘输入并阻断事件 屏蔽键盘输入 -->
        <el-radio-group v-model="queryParam.qry_typeselect" @change="doQuery" @keydown.native.capture="ChangeRadio($event)">
          <el-radio-button v-for="item in typeSelectList" :key="item.code" :label="item.code">{{ item.name }}</el-radio-button>
        </el-radio-group>
      </template>
    </tl-list-toolbar>
    <div>
      <!-- 列表选择 -->
      <div class="table-alert-div" ref="selector">
        <el-alert type="success" :closable="false" class="tl-table-alert-info" effect="light">
          <template slot="title">
            已选择&nbsp;<a class="tl-table-alert-info-a1">{{ selectedRowKeys.length }}</a
            >项&nbsp;&nbsp;
            <a class="tl-table-alert-info-a2" @click="doClearSelected">全部清空</a>
          </template>
        </el-alert>
      </div>
      <!--表格渲染-->
      <el-table class="tl-table" ref="mainTable" :height="tableHeight" resizable-key="tableHeight" :resizable-refs="tableResizeRefs" v-loading="loading" :data="datas" @selection-change="doSelectChange" @sort-change="doSortChange" @row-dblclick="doRowDbClick" @row-click="doRowClick" row-key="id" border fit :row-class-name="doChangeRowClassName" :default-sort="{ prop: 'begintime', order: 'descending' }">
        <el-table-column type="index" label="序号" width="55px" align="center"></el-table-column>
        <el-table-column prop="name" label="会议主题" min-width="180px" sortable="custom" sort-by="name" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="dispmeettypeid" label="会议类型" width="200px" sortable="custom" sort-by="meettypeid" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="place" label="会议地点" width="200px" sortable="custom" sort-by="place" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="begintime" label="会议开始时间" width="180px" sortable="custom" sort-by="begintime" align="center" header-align="center" :formatter="dateTimeFormat" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="endtime" label="会议结束时间" width="180px" sortable="custom" sort-by="endtime" align="center" header-align="center" :formatter="dateTimeFormat" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="keywords" label="会议标签" width="180px" sortable="custom" sort-by="keywords" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="dispstate" label="会议状态" width="100px" sortable="custom" sort-by="state" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="launchusername" label="会议发起人" width="100px" sortable="custom" sort-by="launchusername" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="状态" width="130px" v-slot="scope" :render-header="renderHeaderMethods">
          <svg-icon icon-class="meet_detail_audio_uploaded" style="height: 22px; width: 22px" v-if="scope.row.audiouploaded" />
          <svg-icon icon-class="meet_detail_summary_uploaded" style="height: 22px; width: 22px" v-if="scope.row.recorduploaded" />
          <svg-icon icon-class="meet_detail_task_pushed" style="height: 22px; width: 22px" v-if="scope.row.taskissued" />
          <svg-icon icon-class="meet_detail_task_complete" style="height: 22px; width: 22px" v-if="scope.row.taskcompleted" />
        </el-table-column>
        <el-table-column label="操作" width="110px" v-slot="scope" fixed="right">
          <el-dropdown trigger="hover">
            <el-button type="text" icon="el-icon-s-operation" style="margin-left:10px">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
            <el-dropdown-menu>
              <el-dropdown-item icon="el-icon-view" @click.native="openViewDialog('editForm', scope.row.id)">查看</el-dropdown-item>
              <el-dropdown-item icon="el-icon-s-data" @click.native="openCountDialog(scope.row)">人员统计</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-table-column>
      </el-table>
      <!-- 列表分页 -->
      <el-row class="pagebar" ref="pager">
        <el-pagination @size-change="doChangeSize" @current-change="doChangeIndex" :current-page="pageInfo.currentPage" :page-sizes="pageInfo.pageSizes" :total="pageInfo.totalCount" layout="total, sizes, prev, pager, next, jumper" background class="tl-table-pagination"> </el-pagination>
      </el-row>
      <tl-edit ref="editForm" @refresh="doRefresh" sourceType="meetSearch"></tl-edit>
      <tl-count ref="countForm"  sourceType="meetSearch"></tl-count>
    </div>
  </div>
</template>

<script>
/** mixins */
import { mixin_list } from "@tapui/mixins/mixin_list"
/** 子组件 */
import { formatDate } from "@tapui/utils/date"
import tlEdit from "./edit"
import tlRefMeetType from "../meetTypeManage/refMeetType"
import tlCascader from "@/components/common/cascader"
import tlCount from '@/views/meet/meetManage/count'

/** 工具类 */
import { filterInputForSearch } from "@/utils/inputFilter"
import { getAction, putAction, postAction, deleteAction } from "@tapui/utils/http"
export default {
  name: "meetSearch",
  mixins: [mixin_list],
  components: { tlEdit, tlRefMeetType, tlCount, tlCascader },
  data() {
    return {
      description: "会议查询-列表查询",
      urlPrefix: "/meet/meetManage/",
      url: {
        queryCodeList: "/meet/meetManage/dataCodeList",
        queryMeetTypeList: "/meet/typeManage/queryTreeList",
        queryTeamList: "base/teamInfo/list" // 查询团队
      },
      // 排序参数
      sorterInfo: {
        sidx: "begintime desc, id",
        sord: "desc"
      },
      // 查询所有
      queryParam: { qry_typeselect: "attend", qry_launchuser: "" },
      rowDbClickActionType: "view",
      isQueryOnCreated: false,
      meetType: [],
      meetTypeList: [],
      reduceHeight: 135,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              end.setTime(end.getTime() + 3600 * 1000 * 24 * 7)
              picker.$emit("pick", [start, end])
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              end.setTime(end.getTime() + 3600 * 1000 * 24 * 30)
              picker.$emit("pick", [start, end])
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              end.setTime(end.getTime() + 3600 * 1000 * 24 * 90)
              picker.$emit("pick", [start, end])
            }
          },
          {
            text: "过去一周",
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit("pick", [start, end])
            }
          },
          {
            text: "过去一个月",
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit("pick", [start, end])
            }
          },
          {
            text: "过去三个月",
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit("pick", [start, end])
            }
          }
        ]
      },
      typeSelectList: [{ code: "attend", name: "我参与的" }, { code: "all", name: "所有的" }],
      compCreated: false
    }
  },
  computed: {
    qry_launchuser() {
      return this.queryParam.qry_launchuser
    }
  },
  watch: {
    qry_launchuser(newV) {
      this.queryParam.qry_launchuser = filterInputForSearch(newV)
    }
  },
  methods: {
    afterLoadData() {
      this.datas.forEach(row => {
        if (row.airlinecompany && row.airlinecompany !== "" && row.airlinecompany !== null) {
          row.place = row.airlinecompany
        }
      })
    },
    filterInput(val) {
      return filterInputForSearch(val)
    },
    ChangeRadio(event) {
      event.stopPropagation()
      event.preventDefault()
    },
    handleMeetTypeChange(value) {
      this.queryParam.qry_meettypeid = value[value.length - 1]
    },
    meetTimeChange(value) {
      if (value == null) {
        this.queryParam.qry_begindatetime = ""
        this.queryParam.qry_enddatetime = ""
      } else {
        this.queryParam.qry_begindatetime = value[0]
        this.queryParam.qry_enddatetime = value[1]
      }
    },
    /** 类型选择改变 */
    typeSelectChange() {},
    /** 人员统计对话框 */
    openCountDialog(row) {
      let id = row.id
      this.$refs.countForm.id = id
      this.$refs.countForm.visible = true
      this.$refs.countForm.clickBtn = ""
      this.$refs.countForm.meetTitle = row.name
      this.$refs.countForm.queryParam = { qry_meetid: id }
      this.$refs.countForm.showSpecialContent = row.sourceapp === 'mpm'
      this.$refs.countForm.doQuery()
      this.$refs.countForm.queryPersonStaticCount()
    },
    renderHeaderMethods(h, { column }) {
      return h(
        "div",
        {
          style: "display:flex;justify-content:center;"
        },
        [
          h("span", column.label),
          h("promptMessages", {
            props: {
              str:
                '<img src="/static/images/meetState/meet_detail_audio_uploaded.svg" style="height: 22px; width: 22px"/>&nbsp;&nbsp;<span style="position: relative; top: -5px">会议录音已上传</span><br/>' +
                '<img src="/static/images/meetState/meet_detail_summary_uploaded.svg" style="height: 22px; width: 22px"/>&nbsp;&nbsp;<span style="position: relative; top: -5px">会议资料已上传</span><br/>' +
                '<img src="/static/images/meetState/meet_detail_task_pushed.svg" style="height: 22px; width: 22px"/>&nbsp;&nbsp;<span style="position: relative; top: -5px">会议任务已下发</span><br/>' +
                '<img src="/static/images/meetState/meet_detail_task_complete.svg" style="height: 22px; width: 22px"/>&nbsp;&nbsp;<span style="position: relative; top: -5px">任务已全部完成</span>'
            }
          })
        ]
      )
    }
  },
 activated() {
    if (this.compCreated) {
      this.loadData({})
    }
  },
  created() {
    /** 查询树 */
    getAction(this.url.queryMeetTypeList, { isAddRoot: false }).then(res => {
      if (res.success) {
        let reg = new RegExp("id", "g") // g代表全部
        this.meetTypeList = JSON.parse(JSON.stringify(res.result.dataList).replace(reg, "value"))
      }
    })
    this.$nextTick(() => {
      this.compCreated = true
    })
    this.isHeaderDisplay = false
    this.loadData({})
  }
}
</script>

<style></style>
